<template>
    <div id="ShoppingCenter">
   <div class="content">
   <ul class="ContentList">
       <li class="goods" @click="jump(goods.goodsId)" v-for="goods in goodsList" :key="goods.goodsId"><a  herf="#"><img :src="goods.goodsSurfaceimg?goods.goodsSurfaceimg:'https://cp1.douguo.com/upload/tuan/8/8/2/448_88715883441d1564c2f11d9afa6cf0a2.jpg'" alt="" class="imgbox"></a>
       <a href="#"> <h3>{{goods.goodsDecription}}</h3></a>
       <div class="goodsifo">
           <span class="price">￥{{goods.goodsPrice}}</span>
           <span class="sellnum">月售{{goods.goodsSales}}</span></div>
        </li>
    </ul>
   </div>
   <div class="page">
       <el-pagination background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageStart"
      :page-sizes="[1, 2, 8, 12]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
   </div>
    </div>
</template>
<script>
export default {
  name: 'ShoppingCenter',
  data () {
    return {
      total: 0,
      pageStart: 1,
      pageSize: 8,
      goodsList: []
    }
  },
  created () {
    this.goodslisthad()
  },
  methods: {
    goodslisthad () {
      this.$axios({
        method: 'get',
        url: '/Menu/Visitor/selectGoodsByPage',
        params: {
          pageStart: this.pageStart,
          pageSize: this.pageSize
        }
      }).then(data => {
        this.goodsList = data.data.object.list
        this.total = data.data.object.total
      })
    },
    // 监听一页多少条数据
    handleSizeChange (newpage) {
      this.pageSize = newpage
      this.goodslisthad()
    },
    // 监听是那一页
    handleCurrentChange (newnum) {
      this.pageStart = newnum
      this.goodslisthad()
    },
    jump (h) {
      console.log(h)
      this.$router.push({
        name: 'GoodsDetails',
        params: {
          id: h
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
#ShoppingCenter{
    margin-top: 80px;
    margin-bottom: 40px;
}
.content{
    width: 1000px;
    margin: 0 auto;
    // background-color: azure;
    .ContentList{
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        width:100%;
     .goods{
         width: 240px;
         height: 336px;
        //  background-color: lightblue;
         margin-bottom: 30px;
         margin-right: 5px;
    margin-left: 5px;
         .imgbox{
             width: 100%;
             height: 240px;
            //  background-color: lightblue;
         }
         a{
             color: #333;
    text-decoration: none;
         }
         h3{
             height: 40px;
    margin-top: 9px;
    font-size: 15px;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 6px;
         }
        }
        .goodsifo{
            margin-top: 10px;
            .price{
           float: left;
    color: #FF4C44;
    font-size: 18px;
    line-height: 18px;
    margin-left: 6px;
            }
            .sellnum{
                margin-top: -18px;
               margin-left: 190px;
                display: inline-block;
    font-size: 12px;
    color: #999;
    vertical-align: top;
    line-height: 18px;
            }
        }
    }
}
.page{
  text-align: center;
    .el-pagination{
    margin-top: 30px;
    margin-bottom: 60px;
}
}

</style>
